<script setup>
import { ref } from 'vue'
import PkRace from './pkRace.vue';
import RiseRank from './riseRank.vue';
import finalRank from './finalRank.vue';
import { useStore } from 'vuex';
import Toast from '../../../components/toast.vue';
const store = useStore()
const api = store.state.api
// 轮数切换
let tabIndex = ref(0)
const tabChange = (index) => {
    if (tabIndex.value == index) return
    tabIndex.value = index
}
// 页面定位
const getIndex = async () => {
    await api.showIndex().then(res => {
        // res = {
        //     data: {
        //         "errcode": 0,
        //         "result": 1,
        //         "errmsg": "",
        //         "status": 200
        //     }
        // }
        if (res.data.status == 200){
            tabIndex.value = res.data.result
            if(tabIndex.value>1) tabIndex.value=1
        }
    })
}
getIndex()
// 排名-赛程切换
let rankIndex = ref(0)
const getRankIndex = (index) => {
    if (rankIndex.value == index) return
    rankIndex.value = index
}
</script>

<template>
    <div class="leg4">
        <ul class="tab">
            <li v-for="(item, index) in ['第1轮', '第2轮']" :key="index" :class="{ active: tabIndex == index }"
                @click="tabChange(index)">
                <p>{{ item }}</p>
            </li>
        </ul>
        <p class="ruleIntro" v-if="tabIndex==0">每名主播拥有1000起始决战分，本轮主播将与其他19名参赛主播，各进行一场单场定胜负的联赛PK，根据赛况增减决战分，最终按决战分排名，前10名晋级到第2轮</p>
        <p class="ruleIntro" v-else>主播将与其他9名参赛主播，各进行一场单场定胜负的联赛PK，根据赛况增减决战分，最终按决战分排名，决出本次联赛的冠军~</p>
        <div class="rankBox_box">
            <div class="rankBox">
                <ul class="rankTab">
                    <p></p>
                    <li v-for="(item, index) in [tabIndex == 0 ? '晋级排名' : '决赛排名', 'PK赛程']" :key="index"
                        :class="{ active: rankIndex == index }" @click="getRankIndex(index)">{{ item }}
                    </li>
                </ul>
                <RiseRank v-if="tabIndex == 0 && rankIndex == 0" />
                <finalRank v-else-if="tabIndex == 1 && rankIndex == 0" />
                <PkRace v-else :index="tabIndex" ref="pkRace" />
            </div>
        </div>
        <Toast toast-style="leg1 leg4" v-if="store.state.showType == 'leg4'">
            <p class="close" @click="store.commit('changeIsShow')" />
            <div class="ruleBox">
                <div>
                    <p>决赛PK时间</p>
                    <p>03月31日19:00</p>
                </div>
                <div>
                    <p>排名规则</p>
                    <p>共分为2轮联赛PK，20名主播拥有相同的初始1000的决战分，第一轮结束后剩余的决战分，将作为第二轮的起始决战分，根据两轮PK进行增减决战分，第二轮所有比赛结束后，由剩余的决战分排名决出冠军主播归属，若出现决战分相同，则以决赛PK期间的礼物流水排名</p>
                    <div class="cycleBox">
                        <p class="cycleTitle"><span></span>第一轮</p>
                        <p>20进10，每位主播与其他19人各进行一场单局定胜负的联赛PK</p>
                        <ul class="cycleList">
                            <li>获胜且满足低消（PK票≥500,000票）：抢夺对手10%决战分</li>
                            <li>获胜、满足低消且票数翻倍：票数＞对手2倍，抢夺对手20%决战分</li>
                            <li>平局：互相抢夺对手5%决战分</li>
                            <li>未达到低消：扣除5%决战分（500,000票）</li>
                        </ul>
                    </div>
                    <div class="cycleBox">
                        <p class="cycleTitle"><span></span>第二轮</p>
                        <p>10进1，与其他9人各进行一场单局定胜负的联赛PK</p>
                        <ul class="cycleList">
                            <li>获胜且满足低消（PK票≥500,000票）：抢夺对手20%决战分</li>
                            <li>获胜、满足低消且票数翻倍：票数＞对手2倍，抢夺对手30%决战分</li>
                            <li>平局：互相抢夺对手10%决战分</li>
                            <li>未达到低消：扣除5%决战分（500,000票）</li>
                        </ul>
                    </div>
                </div>
                <div>
                    <p>赛段奖励</p>
                    <p>前十名的主播将按最终排名获得对应的冠军/亚军/季军/TOP10封面角标</p>
                </div>
            </div>
        </Toast>
    </div>
</template>

<style lang='scss' scoped></style>